<template>
	<view>
		<view class="flex-col page">
			<view class="flex-col flex-auto group">
				<view class="flex-col section space-y-63">
					<text class="self-center font_1">我的</text>
					<view class="flex-col space-y-40">
						<view class="information">
							<view class="photo">
								<image :src='UserInfo.f_headimgurl'
									style="width: 100%; height: 100%;border-radius: 50%;">
								</image>
							</view>
							<view class="information-rg">
								<view style="display: flex; margin-left: 22px;">
									<view class="name">
										{{UserInfo.f_nickName}}
									</view>
									<view style="position: absolute; right: 25px;" @click="changestatue">
										<u-icon name="account" color="#000000" size="28"></u-icon>
										<view style="font-size: 10px;display: contents;">切换用户</view>
									</view>
								</view>
								<!-- <view class="name">
									{{UserInfo.f_nickName}}
								</view> -->
								<button class="mobile" v-if="!tel" style="color: #03CC6D;
											height: 20px;
											width: 130px;
											margin-left: 1px;
											border: 1px solid #02FF83;
											margin-top: 10px;
											border-radius: 26px;
											background: #ffffff;
											font-size: 11px;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请授权手机号</button>
								<button class="mobile" v-if="tel" style="color: #03CC6D;
											height: 20px;
											width: 130px;
											margin-left: 1px;
											border: 1px solid #02FF83;
											margin-top: 10px;
											border-radius: 26px;
											background: #ffffff;
											font-size: 11px;white-space: nowrap;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号：{{tel}}</button>
								<!-- <view class="mobile" v-if="tel">
									<view class="mobile-p">
										手机号2：{{tel}}
									</view>
								</view> -->
							</view>
						</view>
						<view class="flex-row justify-between group_3">
							<view
								style="display: flex; justify-content: center; align-items: center; width: 100px; height: 20px;">
								<text class="font_2">{{balances}}</text>
							</view>
							<view
								style="display: flex; justify-content: center; align-items: center; width: 100px; height: 20px;">
								<text class="font_2" @click="Withdraw">{{withdraws}}</text>
								<image class="image_3" style="margin-left: 4px;"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col relative line-tabs">
					<view class="flex-row justify-between group_4">
						<text class="font_3 text_2">收入</text>
						<text class="font_3 text_3">提现</text>

					</view>
					<view class="flex-col section_2">
						<view class="flex-row justify-between items-center group_5" @click="guestlist">
							<view class="flex-row space-x-11">
								<image class="shrink-0 image_2"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636511443978.png" />
								<text class="font_4 text_4">数据总览</text>
							</view>
							<image class="image_3 image_4"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
						</view>
						<view class="flex-col group_6">
							<view class="flex-row justify-between items-center group_7" @click="guestlist">
								<view class="flex-row items-center space-x-11">
									<image class="shrink-0 image_5"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636613674341.png" />
									<text class="font_4">基础报表</text>
								</view>
								<image class="image_3 image_6"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
							</view>
							<view class="flex-row justify-between items-center group_8" @click="guestlist">
								<view class="flex-row items-center space-x-12">
									<image class="shrink-0 image_7"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636668791813.png" />
									<text class="font_4">用户消费分析</text>
								</view>
								<image class="image_3 image_8"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
							</view>
						</view>
						<view class="flex-row justify-between items-center group_5" @click="guestlist">
							<view class="flex-row space-x-11">
								<image class="shrink-0 image_2"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636778691394.png" />
								<text class="font_4">经营分析</text>
							</view>
							<image class="image_3 image_4"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
						</view>
						<view class="flex-row justify-between items-center group_9" @click="guestlist">
							<view class="flex-row items-center space-x-13">
								<image class="shrink-0 image_7"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636826655414.png" />
								<text class="font_4">订单时长分析</text>
							</view>
							<image class="image_3 image_9"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636879431310.png" />
						</view>
						<view class="flex-row justify-between items-center group_10" @click="contactAs">
							<view class="flex-row items-center space-x-13">
								<image class="shrink-0 image_10"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636910508314.png" />
								<text class="font_4">联系我们</text>
							</view>
							<image class="image_3 image_11"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636879431310.png" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			withdraws: {
				type: Number,
				default: ""
			},
			balances: {
				type: Number,
				default: ""
			},
		},
		components: {},
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban.png",
						text: '看板',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_tabbar.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				withdraw: '',
				current1: 0,
				UserInfo: {},
				tel: uni.getStorageSync('phoneNumber'),
				balance: ''

			};
		},
		created() {
			console.log('created')
			//提现金额  
			this.$Api.getUserWithdrawal({
				userId: uni.getStorageSync('userid'),
				shopId: uni.getStorageSync('shop_id'),
				// userId: 5480,
				// shopId: 26,
			}).then(res => {
				this.withdraw = res.data.data.approve
				this.balance = res.data.data.money
				console.log(res.data.data.approve, '可提现金额')
			}, err => {})
			this.getUserInfo()
		},
		onShow() {
			console.log('onShow')
			//提现金额
			this.$Api.getUserWithdrawal({
				userId: uni.getStorageSync('userid'),
				shopId: uni.getStorageSync('shop_id'),
				// userId: 5480,
				// shopId: 26,
			}).then(res => {
				this.withdraw = res.data.data.approve
				this.balance = res.data.data.money
				console.log(res.data.data.approve, '可提现金额')
			}, err => {})
		},
		methods: {
			changestatue() {
				this.$emit('statue', 1)
			},
			//暂未开放
			guestlist() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放...'
				})

			},
			//联系我们
			contactAs() {
				uni.navigateTo({
					url: '/pagesB/contactAs/contactAs'
				})
			},
			//提现
			Withdraw() {
				uni.navigateTo({
					url: '/pagesB/Withdraw/Withdraw'
				})
			},
			getUserInfo() {
				//获取用户信息
				this.$Api.getUserInfo({
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					this.UserInfo = res.data.data
					console.log(res.data.data, '成功')
					uni.setStorageSync('phoneNumber', res.data.data.f_phone);
				}, err => {})
			},
			getPhoneNumber(e) { // 判断用户是否允许获取手机号
				this.$Api.getUserPhone({
					userId: uni.getStorageSync('userid'),
					edata: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(res => {
					console.log(res.data.data.phoneNumber, '获取手机号')
					uni.setStorageSync('phoneNumber', res.data.data.phoneNumber);
					this.tel = res.data.data.phoneNumber

				}, err => {})
			},

		},
	};
</script>

<style lang="scss">
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	page {
		width: 100vw;
		height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.information {
		width: 100%;
		height: 200rpx;
		// margin-top: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.photo {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			background-color: #55ff7f;

		}

		.information-rg {
			width: 500rpx;
			height: 100rpx;
			margin-left: 20rpx;

			.name {
				width: 224rpx;
				height: 37rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
			}

			.mobile {
				width: 258rpx;
				// height: 40rpx;
				border: 1px solid #02FF83;
				border-radius: 20rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.mobile-p {
					// width: 240rpx;
					// height: 21rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #03CC6D;
				}
			}

		}
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 234rpx;
		overflow-y: auto;
	}

	.section {
		padding: 105rpx 32rpx 42rpx;
		background-image: linear-gradient(0deg, #f8f8f8 0%, #e6fff1 100%);
	}

	.space-y-63>view:not(:first-child),
	.space-y-63>text:not(:first-child),
	.space-y-63>image:not(:first-child) {
		margin-top: 63rpx;
	}

	.font_1 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		font-weight: 700;
		color: #222222;
	}

	.space-y-40>view:not(:first-child),
	.space-y-40>text:not(:first-child),
	.space-y-40>image:not(:first-child) {
		margin-top: 40rpx;
	}

	.space-x-20>view:not(:first-child),
	.space-x-20>text:not(:first-child),
	.space-x-20>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.image {
		width: 138rpx;
		height: 138rpx;
	}

	.group_2 {
		padding-left: 10rpx;
		padding-bottom: 9rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 10rpx;
	}

	.text-wrapper {
		padding: 10rpx 0;
		border-radius: 22rpx;
		width: 210rpx;
		border: solid 2rpx #19c865;
	}

	.text {
		color: #19c865;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 19rpx;
	}

	.group_3 {
		padding: 0 63rpx;
	}

	.font_2 {
		font-size: 48rpx;
		font-family: PingFang SC;
		line-height: 36rpx;
		font-weight: 700;
		color: #222222;
	}

	.line-tabs {
		margin-top: -13rpx;
	}

	.group_4 {
		padding: 0 162rpx;
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #666666;
	}

	.text_2 {
		line-height: 25rpx;
	}

	.text_3 {
		line-height: 25rpx;
	}

	.section_2 {
		margin: 46rpx 30rpx 0;
		padding-left: 29rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_5 {
		padding: 44rpx 14rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.space-x-11>view:not(:first-child),
	.space-x-11>text:not(:first-child),
	.space-x-11>image:not(:first-child) {
		margin-left: 11rpx;
	}

	.image_2 {
		width: 35rpx;
		height: 29rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_4 {
		line-height: 27rpx;
	}

	.image_3 {
		width: 13rpx;
		height: 24rpx;
	}

	.image_4 {
		margin-right: 32rpx;
	}

	.group_6 {
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		padding: 44rpx 16rpx 40rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_5 {
		width: 33rpx;
		height: 35rpx;
	}

	.image_6 {
		margin-right: 30rpx;
	}

	.group_8 {
		padding: 37rpx 16rpx 43rpx;
	}

	.space-x-12>view:not(:first-child),
	.space-x-12>text:not(:first-child),
	.space-x-12>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.image_7 {
		width: 34rpx;
		height: 34rpx;
	}

	.image_8 {
		margin-right: 32rpx;
	}

	.group_9 {
		margin-top: 44rpx;
		padding: 0 13rpx 39rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.space-x-13>view:not(:first-child),
	.space-x-13>text:not(:first-child),
	.space-x-13>image:not(:first-child) {
		margin-left: 13rpx;
	}

	.image_9 {
		margin-right: 33rpx;
	}

	.group_10 {
		padding: 42rpx 14rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_10 {
		width: 33rpx;
		height: 33rpx;
	}

	.image_11 {
		margin-right: 32rpx;
	}

	.tab-bar {
		padding: 12rpx 68rpx 23rpx;
		background-color: #ffffff;
		border-top: solid 1rpx #f2f4f3;
	}

	.group_11 {
		height: 80rpx;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 4rpx;
	}

	.image_12 {
		width: 54rpx;
		height: 54rpx;
	}

	.font_5 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #9f9f9f;
	}

	.group_12 {
		height: 80.5rpx;
	}

	.text_5 {
		line-height: 21rpx;
	}

	.group_13 {
		height: 79.5rpx;
	}

	.space-y-6>view:not(:first-child),
	.space-y-6>text:not(:first-child),
	.space-y-6>image:not(:first-child) {
		margin-top: 6rpx;
	}

	.text_6 {
		color: #222222;
		line-height: 20rpx;
	}
</style>